import React, { useState } from 'react';
import { 
  Box, 
  Typography, 
  Grid, 
  Card, 
  CardContent, 
  CardActionArea,
  TextField,
  InputAdornment,
  IconButton
} from '@mui/material';
import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
import { Link } from 'react-router-dom';

const HomePage = () => {
  const [searchText, setSearchText] = useState('');

  const cases = [
    {
      title: 'SQL Plugin 案例',
      description: '学习如何使用 Tauri SQL Plugin 进行数据库操作，包括创建表、增删改查等基本操作。',
      path: '/sql-case',
    },
    {
      title: '系统信息',
      description: '使用 Tauri OS Plugin 获取详细的系统信息，包括操作系统类型、版本、架构等。',
      path: '/os-info',
    },
    {
      title: '系统详情',
      description: '使用 Tauri System Info Plugin 获取全面的系统详情，包括CPU、内存、网络、磁盘等信息。',
      path: '/system-info',
    },
    {
      title: '文件操作',
      description: '使用 Tauri Dialog Plugin 进行文件选择、保存和对话框操作。',
      path: '/file-operation',
    },
    {
      title: 'HTTP 请求',
      description: '使用 Tauri HTTP Plugin 发送网络请求，演示如何与远程 API 交互。',
      path: '/http-case',
    },
    {
      title: '系统通知',
      description: '使用 Tauri Notification Plugin 发送系统通知，支持自定义标题、内容和通知频道。',
      path: '/notification-case',
    },
    {
      title: '日志记录',
      description: '使用 Tauri Log Plugin 记录应用日志，支持多种日志级别和多种输出目标。',
      path: '/log-case',
    },
    {
      title: '系统托盘',
      description: '使用 Tauri 创建系统托盘图标，让应用可以在后台运行，并通过托盘菜单进行交互。',
      path: '/tray-case',
    }
  ];

  const filteredCases = cases.filter(caseItem => 
    caseItem.title.toLowerCase().includes(searchText.toLowerCase()) ||
    caseItem.description.toLowerCase().includes(searchText.toLowerCase())
  );

  const handleClearSearch = () => {
    setSearchText('');
  };

  return (
    <Box sx={{ p: 3 }}>
      <Typography variant="h4" component="h1" gutterBottom sx={{ userSelect: 'none' }}>
        案例学习
      </Typography>

      <Box sx={{ 
        mb: 4, 
        border: '1px solid #e0e0e0',
        borderRadius: 2,
        backgroundColor: '#fff',
        '&:hover': {
          borderColor: '#bdbdbd'
        }
      }}>
        <TextField
          fullWidth
          variant="standard"
          placeholder="搜索案例..."
          value={searchText}
          onChange={(e) => setSearchText(e.target.value)}
          InputProps={{
            startAdornment: (
              <InputAdornment position="start">
                <SearchIcon sx={{ color: 'text.secondary' }} />
              </InputAdornment>
            ),
            endAdornment: searchText && (
              <InputAdornment position="end">
                <IconButton onClick={handleClearSearch} edge="end" sx={{ color: 'text.secondary' }}>
                  <ClearIcon />
                </IconButton>
              </InputAdornment>
            ),
            disableUnderline: true
          }}
          sx={{
            '& .MuiInputBase-root': {
              padding: '8px 12px',
              backgroundColor: 'transparent',
              boxShadow: 'none',
              '&:hover': {
                boxShadow: 'none',
                backgroundColor: 'transparent'
              },
              '&.Mui-focused': {
                boxShadow: 'none',
                backgroundColor: 'transparent'
              },
              '&::before': {
                display: 'none'
              },
              '&::after': {
                display: 'none'
              }
            },
            '& .MuiInputBase-input': {
              padding: '4px 0',
              backgroundColor: 'transparent',
              boxShadow: 'none',
              '&:focus': {
                boxShadow: 'none'
              }
            },
            '& .MuiInput-underline:before': {
              display: 'none'
            },
            '& .MuiInput-underline:after': {
              display: 'none'
            }
          }}
        />
      </Box>
      
      <Grid container spacing={3}>
        {filteredCases.map((caseItem) => (
          <Grid item xs={12} sm={6} md={4} key={caseItem.path}>
            <Card 
              component={Link} 
              to={caseItem.path}
              sx={{ 
                textDecoration: 'none',
                height: '100%',
                display: 'flex',
                flexDirection: 'column',
                transition: 'transform 0.2s',
                '&:hover': {
                  transform: 'translateY(-4px)',
                  boxShadow: 3,
                }
              }}
            >
              <CardActionArea sx={{ flexGrow: 1 }}>
                <CardContent>
                  <Typography variant="h6" component="h2" gutterBottom>
                    {caseItem.title}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {caseItem.description}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default HomePage; 